<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业管理系统 - 完整版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
            width: 100%;
            max-width: 1200px;
            min-height: 600px;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 1.2em;
        }
        
        .content {
            padding: 40px;
        }
        
        .login-section {
            max-width: 400px;
            margin: 0 auto 40px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        
        .form-group input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .btn {
            width: 100%;
            padding: 14px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .info-section {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 12px;
            margin-top: 30px;
        }
        
        .info-section h2 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .user-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .user-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s;
        }
        
        .user-card:hover {
            transform: translateY(-4px);
        }
        
        .user-card h3 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .user-card .password {
            font-family: monospace;
            background: #f1f3f4;
            padding: 8px 12px;
            border-radius: 6px;
            margin: 10px 0;
            font-weight: bold;
        }
        
        .user-card .role {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }
        
        .role.admin {
            background: #e8f5e8;
            color: #2e7d32;
        }
        
        .role.user {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .status {
            padding: 12px;
            border-radius: 8px;
            margin: 10px 0;
            text-align: center;
            font-weight: 600;
        }
        
        .status.success {
            background: #e8f5e8;
            color: #2e7d32;
            border: 1px solid #4caf50;
        }
        
        .status.error {
            background: #ffebee;
            color: #c62828;
            border: 1px solid #f44336;
        }
        
        .hidden {
            display: none;
        }
        
        .dashboard {
            padding: 20px;
        }
        
        .welcome {
            text-align: center;
            padding: 40px;
            background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
            border-radius: 12px;
            margin-bottom: 30px;
        }
        
        .welcome h2 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .welcome p {
            color: #666;
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>企业管理系统</h1>
            <p>统一身份认证平台</p>
        </div>
        
        <div class="content">
            <!-- 登录界面 -->
            <div id="loginSection" class="login-section">
                <h2 style="text-align: center; margin-bottom: 30px;">用户登录</h2>
                <form id="loginForm">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" name="username" placeholder="请输入用户名" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="password" placeholder="请输入密码" required>
                    </div>
                    
                    <button type="submit" class="btn">登录</button>
                </form>
                
                <div id="loginStatus"></div>
            </div>
            
            <!-- 欢迎界面 -->
            <div id="welcomeSection" class="hidden">
                <div class="welcome">
                    <h2>欢迎回来！</h2>
                    <p>您已成功登录系统</p>
                    <p><strong>用户名：</strong><span id="welcomeUsername"></span></p>
                    <p><strong>身份：</strong><span id="welcomeRole"></span></p>
                    <button onclick="logout()" class="btn" style="max-width: 200px; margin: 20px auto;">退出登录</button>
                </div>
            </div>
            
            <!-- 测试用户信息 -->
            <div class="info-section">
                <h2>测试用户账户</h2>
                <p style="text-align: center; color: #666; margin-bottom: 20px;">以下账户均可直接登录使用</p>
                
                <div class="user-grid">
                    <div class="user-card">
                        <h3>admin</h3>
                        <div class="password">123456</div>
                        <div class="role admin">管理员</div>
                    </div>
                    
                    <div class="user-card">
                        <h3>李四</h3>
                        <div class="password">123456</div>
                        <div class="role user">普通用户</div>
                    </div>
                    
                    <div class="user-card">
                        <h3>王五</h3>
                        <div class="password">123456</div>
                        <div class="role user">普通用户</div>
                    </div>
                    
                    <div class="user-card">
                        <h3>李松远</h3>
                        <div class="password">123456</div>
                        <div class="role user">普通用户</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8000';
        let currentToken = null;

        // 登录表单处理
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const statusDiv = document.getElementById('loginStatus');
            
            if (!username || !password) {
                showStatus('请输入用户名和密码', 'error');
                return;
            }

            try {
                const formData = new URLSearchParams();
                formData.append('username', username);
                formData.append('password', password);

                const response = await fetch(`${API_BASE_URL}/auth/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: formData
                });

                const data = await response.json();

                if (response.ok) {
                    currentToken = data.access_token;
                    showWelcome(username);
                    showStatus('登录成功！', 'success');
                } else {
                    showStatus(data.detail || '登录失败，请检查用户名和密码', 'error');
                }
            } catch (error) {
                showStatus('网络连接失败，请确保服务已启动', 'error');
                console.error('登录错误:', error);
            }
        });

        function showWelcome(username) {
            document.getElementById('welcomeUsername').textContent = username;
            document.getElementById('welcomeRole').textContent = username === 'admin' ? '管理员' : '普通用户';
            
            document.getElementById('loginSection').classList.add('hidden');
            document.getElementById('welcomeSection').classList.remove('hidden');
        }

        function logout() {
            currentToken = null;
            document.getElementById('loginForm').reset();
            document.getElementById('welcomeSection').classList.add('hidden');
            document.getElementById('loginSection').classList.remove('hidden');
            showStatus('', '');
        }

        function showStatus(message, type) {
            const statusDiv = document.getElementById('loginStatus');
            if (!message) {
                statusDiv.innerHTML = '';
                return;
            }
            
            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
        }

        // 页面加载时测试连接
        window.addEventListener('load', () => {
            fetch(`${API_BASE_URL}/`)
                .then(() => console.log('✅ 后端服务连接正常'))
                .catch(() => {
                    showStatus('无法连接到后端服务，请检查服务是否启动', 'error');
                });
        });

        // 回车键登录
        document.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !document.getElementById('welcomeSection').classList.contains('hidden')) {
                document.getElementById('loginForm').dispatchEvent(new Event('submit'));
            }
        });
    </script>
</body>
</html>